<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日程管理</title>
    <script src="../../../../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../../../res/js/login_common.js" charset="utf-8"></script>
    <script src="../../../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../../../res/js/Tools.js" charset="utf-8"></script>
    <script src="../../../../res/js/error.js" charset="utf-8"></script>
    <script src="../../../../res/fullcalendar/fullcalendar.js" charset="utf-8"></script>
    <script src="../../../../res/fullcalendar/zh-cn.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../../../res/layui/css/layui.css" media="all">
    <link rel="stylesheet" href='../../../../res/fullcalendar/fullcalendar.css' rel='stylesheet'/>
</head>
<body style="padding: 10px">
<div class="layui-fluid" id="test">
    <div class="layui-card">
        <div class="layui-card-body">
            <div id='calendar'></div><!-- 此处就是放置日历界面的div，注意id的使用 -->
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['form', 'table','upload', 'laydate'], function () {
        let table = layui.table
            , layer = layui.layer
            , upload = layui.upload
            , laydate = layui.laydate
            , form = layui.form;
    });
  document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            defaultView: 'dayGridMonth',//初始化时的默认视图，month、agendaWeek、agendaDay
            locale: 'zh-cn',//使用中文
            eventLimit: true,//设置为true时，如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据
            displayEventEnd: true,///是否在日历上显示事件结束时间，默认是false。如果displayEventTime设置为false的情况下，事件的结束时间无论如何都不会显示。
            headerToolbar: {//定义日历表的表头有哪些信息、按钮
                left: 'prev,next today',// 此处是前翻、后翻、返回到当前时间，前翻后翻可用于年月周日等不同的时间视图
                center: 'title',// 此处是前翻、后翻、返回到当前时间，前翻后翻可用于年月周日等不同的时间视图
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'// 此处是定义日历右边有几种时间视图，代码中的分别定义了月、周、日三种视图的按
            },
            initialDate: new Date(), //显示日期
            navLinks: true, //允许天/周名称是否可点击，包括周次weekNumber，点击之后可以跳转到对于的天/周视图，默认false。
            nowIndicator: true,//是否显示指示当前时间的标记
            weekNumbers: false,//是否在日历中显示第几周
            weekNumberCalculation: 'ISO',//设置用于计算和显示周数的方法，默认是"local"

            editable: false,//是否允许事件可以被编辑，值为布尔类型，默认值为false。 editable 决定了日程是否可以被调整和拖拽
            selectable: true,//是否允许用户单击或者拖拽日历中的天和时间隙。默认false。
            dayMaxEvents: true, // allow "more" link when too many events
            events: function (info,callback) {
                const url = getRootPath() + "OaPersonnelAction/getToken";
                 $.ajax({
                    url: url,
                    type: 'GET',
                    async: false,
                    success: res => {
                        $.ajax({
                            url: getRootPath() + 'OaSchduleAction/schduleFindAll',
                            type: 'GET',
                            dataType: 'json',
                            headers: {token: res.data.token},
                            success: function (resp) {
                                var events = [];
                                var currentTime = new Date();
                                if (resp.code==1){
                                    for(let i in resp.data.data){
                                        var bColor = null;
                                        // 准备干的
                                        if(currentTime<new Date(resp.data.data[i].schduleStartTime)){
                                            bColor='green';
                                        }
                                        //进行中
                                        if (currentTime>=new Date(resp.data.data[i].schduleStartTime)&& currentTime<=new Date(resp.data.data[i].schduleEndTime)){
                                            bColor="red";
                                        }
                                        // 结束的
                                        if (currentTime>new Date(resp.data.data[i].schduleEndTime)){
                                            bColor='slategray ';
                                        }
                                        events.push({
                                            title: resp.data.data[i].schduleTitle,
                                            start:  new Date(resp.data.data[i].schduleStartTime),
                                            end:  new Date(resp.data.data[i].schduleEndTime),// 日程结束时间
                                            id:  resp.data.data[i].pkSchduleId, // 日程id
                                            color:bColor,
                                        });
                                    }
                                    }else {
                                }
                                callback(events);
                                }
                                });
                            }
                        });
                    },

                dateClick:function (info,jsEvent,view) {
                    console.log(info.dateStr);
                var selDate=info.dateStr;
                    openLayer(selDate);
                    function openLayer(selDate) {
                        console.log()
                        addIndex=layer.open({
                            title : '<i class="fa fa-plus"></i>&nbsp;新增日程',
                            type : 2,
                            fix : false,
                            skin : 'layui-layer-rim',
                            // 加上边框
                            area : [ '500px', '500px' ],
                            // 宽高
                            content : "scheduleFrom.html?date="+selDate,
                        });

                    }

            },
            eventClick: function(event) {
             var id=event.event._def.publicId;
                console.log(id);
                updateLayer(id);
                function updateLayer(id) {
                    console.log(id);
                    addIndex=layer.open({
                        title : '<i class="fa fa-plus"></i>&nbsp;编辑和删除日程',
                        type : 2,
                        fix : false,
                        skin : 'layui-layer-rim',
                        // 加上边框
                        area : [ '500px', '500px' ],
                        // 宽高
                        content : "scheduleFrom.html?pkSchduleId="+id,
                    });

                }
            }

            });
        calendar.render();
    });

</script>
<style>

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 9000px;
        margin: 0 auto;
    }

</style>
</html>